<template>
	<view>
		<view style="width: 92%;margin: 20rpx auto;overflow: hidden;">
			<view style="position: relative;float: left;width: 74%;box-sizing: border-box;box-sizing: border-box;">
				<input type="text"  class="sou" placeholder-class="suo" v-model="keywords"
					placeholder="输入市场名搜索" />
				<image src="https://static-1310167831.cos.ap-nanjing.myqcloud.com/uploads/20230608/08b952a2e9333723977e62539c6da631.png"
					class="souicon" mode=""></image>
				<image @click="guanbi" src="https://static-1310167831.cos.ap-nanjing.myqcloud.com/uploads/20230608/42d85515245b8641d8c28704f7c7deff.png" style="width: 32rpx;height: 32rpx;display: block;position: absolute;top: 50%;right: 20rpx;transform: translateY(-50%);border-radius: 50%;" mode=""></image>
			</view>
			<view @click="sousuo" style="float: right;width: 150rpx;height: 80rpx;line-height: 80rpx;text-align: center;background-color: #1FB0AC ;color: #fff;border-radius: 40rpx;font-size: 26rpx;">
				搜索
			</view>
		</view>
		<view style="line-height: 80rpx;margin: 10rpx auto;width: 92%;color: #000000;font-size: 34rpx;font-weight: 600;">
			全部市场
		</view>
		<view style="width: 92%;margin: 0 auto;">
			<scroll-view :enable-flex="true" scroll-with-animation :throttle="false" :scroll-y="true" :scroll-into-view="scrollinfo" style="max-height: 70vh;">
				<view @click="xuan_sc(index,item.id,item.name)" :class="item.check?'active':'as'" v-for="(item,index) in sc_list" :id='item.ids' :key='index' style="line-height: 90rpx;width: 100%;padding: 0 30rpx;box-sizing: border-box;border-radius: 10rpx;background-color: #fff;font-size: 28rpx;color: #000000;margin-bottom: 20rpx;">
					{{item.name}}
				</view>
			</scroll-view>
			<view v-if="sc_list.length<=0">
				<view style="text-align: center;">
					<image src="https://static-1310167831.cos.ap-nanjing.myqcloud.com/uploads/20230608/c1ec7892909af001af80bfdd2bf1e90c.png" style="width: 400rpx;" mode="widthFix"></image>
				</view>
				<u-divider color='#717171' bg-color='#f0f2f8' height='80' border-color='#717171' text="暂无数据"></u-divider>
			</view>
		</view>
		<!-- <view style="line-height: 80rpx;margin: 10rpx auto;width: 92%;color: #000000;font-size: 34rpx;font-weight: 600;">
			已选择市场
		</view>
		<view style="width: 92%;margin: 0 auto;">
			<scroll-view :enable-flex="true" scroll-with-animation :throttle="false" :scroll-y="true" :scroll-into-view="scrollinfo" style="max-height: 300rpx;">
				<view style="overflow: hidden;">
					<view v-for="(item,index) in shichang_list" :key='index' style="line-height: 90rpx;padding: 0rpx 30rpx;border-radius: 10rpx;background-color: #fff;font-size: 28rpx;color: #000000;margin-top: 20rpx;margin-right: 20rpx;float: left;display: inline-block;position: relative;">
						{{item.name}}
						<image @click="shangchu(index)" src="https://static-1310167831.cos.ap-nanjing.myqcloud.com/uploads/20230608/42d85515245b8641d8c28704f7c7deff.png" style="width: 26rpx;height: 26rpx;display: block;position: absolute;top: -10rpx;right: -10rpx;border-radius: 50%;" mode=""></image>
					</view>
				</view>
			</scroll-view>
			<view v-if="shichang_list.length<=0">
				<view style="text-align: center;">
					<image src="https://static-1310167831.cos.ap-nanjing.myqcloud.com/uploads/20230608/c1ec7892909af001af80bfdd2bf1e90c.png" style="width: 400rpx;" mode="widthFix"></image>
				</view>
				<u-divider color='#717171' bg-color='#f0f2f8' height='80' border-color='#717171' text="暂无数据"></u-divider>
			</view>
		</view> -->
		<view @click="queding" style="width: 620rpx;background-color: #1FB0AC ;border-radius: 46rpx;line-height: 90rpx;height: 90rpx;text-align: center;font-size:28rpx;color: #fff;position: fixed;left: 50%;bottom: 60rpx;transform: translateX(-50%);">
			确定
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				scrollinfo:'',
				sc_list:[],
				keywords:'',
				sc_id:'',
				sc_name:''
			}
		},
		onLoad(option) {
			this.scrollinfo=''
			
			if(option.id){
				this.sc_id=option.id
			}
			console.log(option)
			this.shichang()
		},
		methods:{
			guanbi:function(){
				this.keywords=''
				this.shichang()
			},
			queding:function(){
				for(let i=0;i<this.sc_list.length;i++){
					if(this.sc_list[i].check){
						this.sc_id=this.sc_list[i].id
						this.sc_name=this.sc_list[i].name
						break
					}else{
						this.sc_id=''
						this.sc_name=''
					}
				}
				console.log(this.sc_id)
				// console.log(this.sc_id)
				// return
				let pages = getCurrentPages();
				let prevPage = pages[ pages.length - 2 ];  //上一页页面实例
				//修改上一页data里面的searchVal参数值为1211
				prevPage.$vm.bazaar_id=this.sc_id
				prevPage.$vm.qihuo3=this.sc_name
				uni.navigateBack({  //uni.navigateTo跳转的返回，默认1为返回上一级
					delta: 1
				});
			},
			
			shichang:function(){
				this.post('api/firm/bazaar_list','',true).then(res=>{
					console.log(res)
					if(res.code==1){
						this.sc_list=res.data
						for(let i=0;i<this.sc_list.length;i++){
							this.sc_list[i].ids='a'+this.sc_list[i].id
						}
						if(this.sc_id==''){
							for(let i=0;i<this.sc_list.length;i++){
								this.sc_list[i].check=false
							}
						}else{
							for(let i=0;i<this.sc_list.length;i++){
								if(this.sc_list[i].id==this.sc_id){
									this.scrollinfo=this.sc_list[i].ids
									console.log(this.scrollinfo,147741147)
									this.sc_list[i].check=true
									this.sc_list[i].sc_name=this.sc_list[i].name
								}else{
									this.sc_list[i].check=false
								}
							}
						}
						console.log(this.sc_list,123)
					}
				})
			},
			sousuo:function(){
				this.scrollinfo=''
				if(this.keywords==''){
					uni.showToast({
						title: '请输入要搜索的市场名', 
						icon: "none",
						duration: 1000
					})
				}else{
					this.post('api/firm/bazaar_list',{keywords:this.keywords},true).then(res=>{
						console.log(res)
						if(res.code==1){
							this.sc_list=res.data
							if(this.sc_id==''){
								for(let i=0;i<this.sc_list.length;i++){
									this.sc_list[i].ids='a'+this.sc_list[i].id
									this.sc_list[i].check=false
								}
							}else{
								for(let i=0;i<this.sc_list.length;i++){
									if(this.sc_list[i].id==this.sc_id){
										this.sc_list[i].check=true
										this.sc_list[i].sc_name=this.sc_list[i].name
									}else{
										this.sc_list[i].check=false
									}
								}
							}
						}else{
							uni.showToast({
								title: res.msg,
								icon: "none",
								duration: 1000
							})
						}
					})
				}
			},
			xuan_sc:function(index,id,name){
				// for(let i=0;i<this.shichang_list.length;i++){
				// 	if(this.shichang_list[i].id==id){
				// 		uni.showToast({
				// 			title: '亲,您已经选过了！',
				// 			icon: "none",
				// 			duration: 1000
				// 		})
				// 		return
				// 	}
				// }
				this.sc_list[index].check=!this.sc_list[index].check
				
				for(let i=0;i<this.sc_list.length;i++){
					if(this.sc_list[i].check && index==i){
						this.sc_id=this.sc_list[i].id
						this.sc_name=this.sc_list[i].name
						break
					}else{
						this.sc_id=''
						this.sc_name=''
						this.sc_list[i].check=false
					}
				}
				this.$forceUpdate()
			},
			shangchu:function(index){
				let that=this
				uni.showModal({
					title: '提示',
					content: '您确定要删除该市场？',
					success: function (res) {
						if (res.confirm) {
							that.shichang_list.splice(index,1)
							that.$forceUpdate()
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	.active{
		border: 1px solid #1FB0AC;
	}
	.as{
		border: 1px solid #fff;
	}
	.sou {
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		border-radius: 40rpx;
		color: #767676;
		font-size: 26rpx;
		box-sizing: border-box;
		padding: 0 60rpx 0 80rpx;
		background-color: #FFFFFF;
	}
	.suo {
		color: #767676;
		opacity: 1;
		font-size: 26rpx;
	}
	
	.souicon {
		width: 30rpx;
		height: 30rpx;
		position: absolute;
		top: 50%;
		left: 30rpx;
		transform: translateY(-50%);
	
	}
	page{
		background-color: #f6f6f6;
		font-family: Demibold;
	}
</style>